<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 通过meta标签,设定读取网络来源图片 -->
    <meta name="referrer" content="never">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../tools/jquery-pagination/pagination.css">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/list.css">
    <style>
        .breadcrumb {
            padding-left: 6px;
            padding-right: 6px;
        }
        
        .box {
            width: 800px;
            margin: 100px auto;
        }
        
        .m-style .next,
        .m-style .prev {
            border: 2px solid red;
        }
        
        .m-style .active {
            background: orange;
            border: 1px solid orange;
        }
        
        .m-style .jump-ipt {
            width: 100px;
        }
        
        h1 {
            text-align: center;
            font-size: 60px;
        }
    </style>
</head>

<body>
    <h1>商品列表</h1>

    <div class="pagi"></div>

    <div class="box m-style"></div>

    <div class="container">
        <ul></ul>
    </div>



    <script src="../js/jquery.min.js"></script>
    <script src="../tools/jquery-pagination/jquery.pagination.js"></script>
    <script src="../js/tools.js"></script>
    <script>
        // 1, 获取浏览器地址栏参数 结果是一个对象
        const urlObj = getUrlVal()
        console.log(urlObj);

        // 2, 设定参数 page line
        let page = 1;
        let line = 8;

        // 3, 通过调用函数 获取 页数是 1 的数据
        setPage();


        // 函数
        function setPage() {
            // 使用promise语法形式 发送请求
            const p = new Promise(function(f, r) {
                    // 设定 ajax请求
                    $.ajax({
                        url: '../server/goods_list.php',
                        type: 'get',
                        data: {
                            cat_one_id: urlObj.cat_one_id,
                            page,
                            line
                        },
                        dataType: 'json',
                        success: f,
                        error: r,
                    })
                })
                // 请求成功 动态渲染生成页面 生成 分页器
            p.then(function(res) {
                console.log(res);
                // 东方渲染生成li标签
                str = '';
                res.data.forEach(item => {
                        str += `
          <li class="list-item">
            <div class="panel panel-primary">
              <div class="panel-body">
                <ol class="breadcrumb">
                  <li><a href="#">${item.cat_one_id}</a></li>
                  <li><a href="#">${item.cat_two_id}</a></li>
                  <li class="active">${item.cat_three_id}</li>
                </ol>
              </div>
              <div class="panel-footer">
                <div class="row">
                  <div class="">
                    <div class="thumbnail">
                      <img src="${item.goods_big_logo}" alt="...">
                      <div class="caption">
                        <h3>${item.goods_name}</h3>
                        <p>
                          <i class="glyphicon glyphicon-yen"></i>
                          <span>${item.goods_price}</span>
                        </p>
                        <p>
                          <a href="javascript:;" class="btn btn-primary" role="button">查找相似商品</a>
                          <a href="./detail.html?goods_id=${item.goods_id}" class="btn btn-danger" role="button">查看商品详情</a>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
        
        `;
                    })
                    // 将 字符串 写入页面
                $('.container ul').html(str);

                // 获取数据库数据 动态生成 页面后 
                // 使用分页器 生成 分页显示
                $('.box').pagination({
                    pageCount: res.sumPage, // 总页数
                    totalData: res.row, // 数据总数量
                    current: res.page, // 当前是第几页
                    showData: res.line, // 每页数据数量
                    prevCls: 'prev', // 上一页的class类名 使用原始类名保留默认样式
                    nextCls: 'next', // 下一页的class类名 使用原始类名保留默认样式
                    prevContent: '上一页', // 上一页文本内容
                    nextContent: '下一页', // 下一页文本内容
                    activeCls: 'active', // 选中状态类名
                    mode: 'fixed', // 固定 分页按钮数量
                    count: 4, // 除了选中页 表示页数的按钮的数量 设定4 一共显示5个按钮
                    coping: true, // 开启首页末页
                    homePage: '首页', // 首页文字内容
                    endPage: '末页', // 末页文字内容
                    isHide: true, // 总页数 为 0 或者 1 时 隐藏 分页控件
                    // keepShowPN: false,              // 只有 mode: 'unfixed', 不固定按钮时 可以设定 
                    jump: true, // 开启页数跳转 
                    jumpIptCls: 'jump-ipt', // 跳转 input 样式类名
                    jumpBtnCls: 'jump-btn', // 跳转 button 样式类名
                    jumpBtn: 'go', // 跳转 button 内容
                    callback: function(val) { // 回调函数 必须要有一个参数 存储数据
                        console.log(val);
                        // 参数.getCurrent() 
                        // 获取 点击按钮 对应的页数 
                        // 设定 给 page 变量储存
                        page = val.getCurrent();
                        // 根据 新的 page 的数据 也是 页数的数据
                        // 再次 发送 ajax请求 获取 数据库数据 再次动态渲染生成页面 再次生成 分页器
                        // 也就是 再次调用函数本身
                        setPage();
                    }
                });
            })
        }
    </script>
</body>

</html>